<template>
  <div class="w">
    <!-- 左侧主体 -->
    <div id="content">
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick" @click="handleClick">
        <el-tab-pane label="全部" name="first">
          <ul v-for="item in topicList" :key="item.id">
            <li class="cell">
              <a href="javascript:;" class="user_avatar">
                <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" :onerror="defaultImg" />
              </a>
              <span class="reply_count">
                <span title="回复数" class="count_of_replies">{{ item.reply_count }}</span>
                <span> / </span>
                <span title="点击数">{{ item.visit_count }}</span>
              </span>
              <span class="put_top" v-if="item.top === true">置顶</span>
              <span class="put_good" v-else-if="item.good === true">精华</span>
              <span class="topiclist_tab" v-else-if="item.tab === 'ask'">问答</span>
              <span class="topiclist_tab" v-else-if="item.tab === 'share'">分享</span>
              <span class="topiclist_tab" v-else-if="item.tab === 'job'">招聘</span>
              <a :href="'/topic/' + item.id" :title="item.title" class="topic_title">
                {{ item.title | ellipsis }}
              </a>
              <a href="javascipt:;" class="last_reply">
                <img :src="item.author.avatar_url" alt="" />
                <span>
                  {{ item.last_reply_at | dateFormat }}
                </span>
              </a>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="精华" name="second">
          <ul v-for="item in topicList" :key="item.id">
            <li class="cell">
              <a href="javascript:;" class="user_avatar">
                <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" :onerror="defaultImg" />
              </a>
              <span class="reply_count">
                <span title="回复数" class="count_of_replies">{{ item.reply_count }}</span>
                <span> / </span>
                <span title="点击数">{{ item.visit_count }}</span>
              </span>
              <span class="put_good">精华</span>
              <a :href="'/topic/' + item.id" :title="item.title" class="topic_title">
                {{ item.title | ellipsis }}
              </a>
              <a href="javascipt:;" class="last_reply">
                <img src="" alt="" :onerror="defaultImg" />
                <span>{{ item.last_reply_at | dateFormat }}</span>
              </a>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="分享" name="third">
          <ul v-for="item in topicList" :key="item.id">
            <li class="cell">
              <a href="javascript:;" class="user_avatar">
                <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" :onerror="defaultImg" />
              </a>
              <span class="reply_count">
                <span title="回复数" class="count_of_replies">{{ item.reply_count }}</span>
                <span> / </span>
                <span title="点击数">{{ item.visit_count }}</span>
              </span>
              <span class="put_top" v-if="item.top === true">置顶</span>
              <span class="put_good" v-else-if="item.good === true">精华</span>
              <a :href="'/topic/' + item.id" :title="item.title" class="topic_title">
                {{ item.title | ellipsis }}
              </a>
              <a href="javascipt:;" class="last_reply">
                <img src="" alt="" :onerror="defaultImg" />
                <span>{{ item.last_reply_at | dateFormat }}</span>
              </a>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="问答" name="fourth">
          <ul v-for="item in topicList" :key="item.id">
            <li class="cell">
              <a href="javascript:;" class="user_avatar">
                <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" :onerror="defaultImg" />
              </a>
              <span class="reply_count">
                <span title="回复数" class="count_of_replies">{{ item.reply_count }}</span>
                <span> / </span>
                <span title="点击数">{{ item.visit_count }}</span>
              </span>
              <a :href="'/topic/' + item.id" :title="item.title" class="topic_title">
                {{ item.title | ellipsis }}
              </a>
              <a href="javascipt:;" class="last_reply">
                <img src="" alt="" :onerror="defaultImg" />
                <span>{{ item.last_reply_at | dateFormat }}</span>
              </a>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="招聘" name="fifth">
          <ul v-for="item in topicList" :key="item.id">
            <li class="cell">
              <a href="javascript:;" class="user_avatar">
                <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" :onerror="defaultImg" />
              </a>
              <span class="reply_count">
                <span title="回复数" class="count_of_replies">{{ item.reply_count }}</span>
                <span> / </span>
                <span title="点击数">{{ item.visit_count }}</span>
              </span>
              <a :href="'/topic/' + item.id" :title="item.title" class="topic_title">
                {{ item.title | ellipsis }}
              </a>
              <a href="javascipt:;" class="last_reply">
                <img src="" alt="" :onerror="defaultImg" />
                <span>{{ item.last_reply_at | dateFormat }}</span>
              </a>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="客户端测试" name="sixth">
          <ul v-for="item in topicList" :key="item.id">
            <li class="cell">
              <a href="javascript:;" class="user_avatar">
                <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" :onerror="defaultImg" />
              </a>
              <span class="reply_count">
                <span title="回复数" class="count_of_replies">{{ item.reply_count }}</span>
                <span> / </span>
                <span title="点击数">{{ item.visit_count }}</span>
              </span>
              <a :href="'/topic/' + item.id" :title="item.title" class="topic_title">
                {{ item.title | ellipsis }}
              </a>
              <a href="javascipt:;" class="last_reply">
                <img src="" alt="" :onerror="defaultImg" />
                <span>{{ item.last_reply_at | dateFormat }}</span>
              </a>
            </li>
          </ul>
        </el-tab-pane>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </el-tabs>
    </div>
    <!-- 右侧区域 -->
    <div id="sidebar">
      <!-- 登录区域 -->
      <div class="panel">
        <div class="inner">
          <p>
            CNode：Node.js专业中文社区
          </p>
          <div>您可以 <a href="/signin">登录 </a>或 <a href="/signup"> 注册</a>，也可以</div>
          <el-button type="primary" class="loginbtn">通过 GitHub 登录</el-button>
        </div>
      </div>
      <!-- 无人回复话题 -->
      <div class="panel">
        <div class="header">
          <span class="col_fade">无人回复的话题</span>
        </div>
        <div class="inner">
          <ul v-for="(item, i) in noReply.slice(0, 5)" :key="i">
            <li>
              <a :href="'/topic/' + item.id" :title="item.title" class="topic_title">
                {{ item.title | ellipsis1 }}
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- TOP100 -->
      <div class="panel">
        <div class="header">
          <span class="col_fade">积分榜</span>
          &nbsp;
          <a href="/users/top100">TOP 100>></a>
        </div>
        <div class="inner">
          <ol>
            <li>
              <span class="score">22540</span>
              <span class="user_name">
                <a href="javascript:;">zhangsan</a>
              </span>
            </li>
            <li>
              <span class="score">22540</span>
              <span class="user_name">
                <a href="javascript:;">zhangsan</a>
              </span>
            </li>
            <li>
              <span class="score">22540</span>
              <span class="user_name">
                <a href="javascript:;">zhangsan</a>
              </span>
            </li>
            <li>
              <span class="score">22540</span>
              <span class="user_name">
                <a href="javascript:;">zhangsan</a>
              </span>
            </li>
            <li>
              <span class="score">22540</span>
              <span class="user_name">
                <a href="javascript:;">zhangsan</a>
              </span>
            </li>
          </ol>
        </div>
      </div>
      <!-- 友情社区 -->
      <div class="panel">
        <div class="header">
          <span class="col_fade">友情社区</span>
        </div>
        <div class="inner">
          <ol class="friendship-community">
            <li>
              <a href="javascript:;">
                <img src="../../public/images/ruby-china-20150529.png" alt="" />
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../../public/images/golangtc-logo.png" alt="" />
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <img src="../../public/images/phphub-logo.png" alt="" />
              </a>
            </li>
          </ol>
        </div>
      </div>
      <!-- 二维码区域 -->
      <div class="panel">
        <div class="header">
          <span class="col_fade">客户端二维码</span>
        </div>
        <div class="inner app_download">
          <img width="200px" src="../../public/images/QRcode.png" alt="" />
          <br />
          <a href="https://github.com/soliury/noder-react-native" target="_blank">客户端源码地址</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      queryInfo: {
        page: 1,
        limit: 20,
        tab: 'all'
      },
      topicList: [],
      defaultImg: 'this.src="' + require('../assets/img/close.png') + '"'
    }
  },
  created() {
    this.getTopicList()
  },
  methods: {
    handleTabClick(tab, e) {
      if (e.target.id === 'tab-first') {
        this.queryInfo.tab = 'all'
      } else if (e.target.id === 'tab-second') {
        this.queryInfo.tab = 'good'
      } else if (e.target.id === 'tab-third') {
        this.queryInfo.tab = 'share'
      } else if (e.target.id === 'tab-fourth') {
        this.queryInfo.tab = 'ask'
      } else if (e.target.id === 'tab-fifth') {
        this.queryInfo.tab = 'job'
      } else {
        this.queryInfo.tab = 'dev'
      }
      this.getTopicList()
    },
    handleClick(e) {
      console.log(e.target)
    },
    async getTopicList() {
      const { data: res } = await this.$http.get('topics', { params: this.queryInfo })
      if (res.status !== 200) {
        // return this.$message.error('获取失败')
      }
      this.topicList = res.data
      console.log(this.topicList)
    },
    handleSizeChange(newsize) {
      this.queryInfo.limit = newsize
      this.getTopicList()
    },
    handleCurrentChange(newpage) {
      this.queryInfo.page = newpage
      this.getTopicList()
    }
  },
  computed: {
    noReply: function() {
      return this.topicList.filter(function(topic) {
        return topic.reply_count === 0
      })
    }
  },
  filters: {
    // 当标题字数超出时，超出部分显示’...‘。此处限制超出8位即触发隐藏效果
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 40) {
        return value.slice(0, 40) + '...'
      }
      return value
    },
    ellipsis1(value) {
      if (!value) return ''
      if (value.length > 22) {
        return value.slice(0, 22) + '...'
      }
      return value
    }
  }
}
</script>

<style lang="less" scoped>
.cell {
  padding: 10px;
}
.user_avatar {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  img {
    width: 100%;
    vertical-align: middle;
  }
}
.reply_count {
  display: inline-block;
  width: 72px;
  height: 28px;
  font-size: 10px;
  text-align: center;
  .count_of_replies {
    font-size: 14px;
    color: #9e78c0;
  }
}
.topiclist_tab {
  background-color: #e5e5e5;
  color: #999;
  padding: 2px 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  font-size: 12px;
}
.put_good,
.put_top {
  background: #80bd01;
  padding: 2px 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  color: #fff;
  font-size: 12px;
}
.topic_title {
  vertical-align: middle;
  font-size: 16px;
  line-height: 30px;
}
.last_reply {
  float: right;
  img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
  }
  span {
    display: inline-block;
    width: 55px;
    font-size: 10px;
    text-align: right;
  }
}
</style>
